<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}

			.mui-input-group:first-child {
				margin-top: 20px;
				width: 350px;
			}

			.mui-input-group label {
				width: 22%;
			}

			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}

			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}

			.mui-content-padded {
				margin-top: 25px;
			}

			.mui-btn {
				padding: 10px;
			}

			.mui-icon-search:hover {
				color: #000000;
			}

			.mui-input-group {
				position: relative;
			}

			#serach {
				float: right;
				margin-top: -30px;
				z-index: 999;
			}

			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			.user-info {
				width: 100%;
				background
			}

			.user-info li {
				margin-bottom: 5px;
				width: 100%;
				height: 60px;
				border-top: none;
			}

			.user-info li:frist-child {
				border: 1px solid rgb(216, 216, 216);
			}

			.icon {
				margin-top: 10px;
				float: left;
				font-size: 20px;
				width: 40px;
				height: 40px;
				margin-left: 5px;
			}

			.icon img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}

			.left {
				float: left;
				margin-left: 10px;
			}

			.username {
				margin-top: 10px;
				margin-bottom: 5px;
			}

			.username span {
				font-size: 18px;
			}

			.message span {
				color: rgb(136, 136, 136);
				font-size: 12px;
			}

			.right {
				width: 150px;
				float: right;
				display: flex;
				align-items: center;
				justify-content: space-around;
			}

			.right img {
				margin-top: 10px;
				width: 40px;
				height: 40px;

			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" ></a>
			<h1 class="mui-title">添加朋友</h1>
		</header>
		<div class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>账号</label>
						<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
					</div>
				</form>
				<div id="serach" style=" touch-action: none;">
					<span class="mui-icon mui-icon-search"></span>
				</div>
				<ul class="user-info" id="requestFriend">
				</ul>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
			(function($) {
				$(".mui-scroll-wrapper").scroll({
					deceleration: 0.02 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
				});
			})(mui);
			document.getElementById('serach').onclick = () => {
				var f_userid = document.getElementById('account').value;
				var sign_str = localStorage.getItem('my_sign_str');
				//console.log(sign_str)
				var m_userid = localStorage.getItem('my_user_id');
				var url = "../onlinechat/interface/addFriend.php"
				mui.ajax(url, {
					data: "sign_str=" + sign_str + "&user_id=" + m_userid + "&friend_user_id=" + f_userid,
					dataType: 'json',
					type: 'post',
					timeout: 10000,
					success: function(data) {
						//mui.toast(data.msg);
						mui.alert(data.msg);
						//alert(data.msg);
					}
				})
			}
			/*用来计数*/
			let num = 0;

			function init() {
				processFriendRequest(true);
			}
			init();
			// setInterval('processFriendRequest()',100);
			// processFriendRequest(false)
			let j=0;
			function processFriendRequest(fristtime) {
				let url = "../onlinechat/interface/processFriendRequest.php";
				let userid = localStorage.getItem("my_user_id");
				let sign = localStorage.getItem("my_sign_str");
				mui.ajax(url, {
					data: {
						sign_str: sign,
						user_id: userid
					},
					dataType: 'json',
					type: 'get',
					success: function(data) {
						var requestFriend = document.getElementById("requestFriend");
						if(fristtime){
							j=data.data.length;
							for (let i = 0; i < data.data.length; i++) {
								var img = data.data[i]['head_logo'];
								var nickname = data.data[i]['nickname'];
								let time = data.data[i]['time'];
								let userid2 = data.data[i]['user_id'];
								render(requestFriend, img, nickname, time, userid2);
							}
						}else{
							for (let i = j; i < data.data.length; i++) {
								var img = data.data[i]['head_logo'];
								var nickname = data.data[i]['nickname'];
								let time = data.data[i]['time'];
								let userid2 = data.data[i]['user_id'];
								render(requestFriend, img, nickname, time, userid2);
							}
							j=data.data.length;
						}
						processFriendRequest(false)
					}
				})

				function render(content, img, nickname, time, userid) {
					content.innerHTML +=
						'<li>' +
						'<div class="icon"><img src=".' + img + '"></div>' +
						'<div class="left">' +
						'<div class="username" id = "onlineuser_info_nickname"><span>' + nickname + '</span></div>' +
						'<div class="message"><span>' + time + '</span></div>' +
						'</div>' +
						'<div class="right"><img src="images/yesfriend.png" onclick="isfriend(' + userid +',1)">'+
						'<img src="images/nofriend.png" onclick="isfriend(' + userid +',2)">'+
						'<img src="images/nonofriend.jpg" onclick="isfriend(' + userid + ',3)"></div>' +
						'</li>';
				}
			}

			function isfriend(fuserid, process_result) {
				let userid = localStorage.getItem("my_user_id");
				let sign = localStorage.getItem("my_sign_str");
				let url = "../onlinechat/interface/processFriendRequest.php";
				mui.ajax(url, {
					data: "sign_str=" + sign + "&user_id=" + userid + "&from_user_id=" + fuserid + "&request_id=" +
						fuserid + "&process_result=" + process_result,
					dataType: 'json',
					type: 'post',
					success: function(data) {
						mui.alert(data.msg)
					}
				})
			}
		</script>
	</body>


</html>
